<!--用户头像-->
<template>
  <div class="example">
    <zz-projectRetrieve
      :isAllWorkers = false
      :isCompany = false
      first="worker"
      :isLabel ="false"
      :isFriend ="false"
      :isContact ="true"
      :all = true
      rId="test"></zz-projectRetrieve>
    <div class="tableClass mt20">
      <table cellspacing="0">
        <tr>
          <th>1) 调用选人组件</th>
        </tr>
        <tr>
          <td><pre>{{explameCall}}</pre></td>
        </tr>
        <tr>
          <th>1) 获取选中人员或者部门的ID</th>
        </tr>
        <tr>
          <td><pre>{{explameHandle}}</pre></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        explameCall:
          `
            <zz-retrieve
              isShow=false 可以手动触发显示
              title="选择人员" 标题
              conWidth="686px" 宽度
              first="company" 默认显示那种类型的联系人 公司 company  项目端的通讯录 worker  日常办公的项目成员 project 我的朋友 friend 我的标签 label
              :openSearch = true 是否打开搜索
              :isShowNav = true 是否显示导航
              :isCompany = true 是否开启公司通讯录
              :isFriend = true 是否开启我的朋友
              :isWorker = true 是否开启工人通讯录
              :isProject = true 是否开启项目成员
              :isLabel = true 是否我的标签
              :multiple = true 是否开启选择多个
              :isAllWorkers = true 是否开启全部工人选项
              :isContact = false 是否打开参建各方 && 项目部成员
              :isOpenContact = true 是否加入参建各方
              :isOpenProjectMember = true 是否加入项目部成员
              :isCooperator = true 是否加入劳务公司
              :isProjectManage = true 项目部成员是加入项目负责人&& 项目部管理员
              :isAllowCompany = true 是否开启跨公司通讯录
              :isborder = true 是否显示边框
              :rId = true 组件的Id 必填
              :isFilter = false 是否开过滤
              :filterRule= "String || Array" 传入需要显示的部门Id
              :openWorkers = true 是否开启右边选择工人
              :openEmployees = true 是否开启右边选择员工
              :isChooseDepart = true 是否开启选择部门
              :isChooseCompany = true 是否开启选择全公司
              :isHasWorkerMid = false 是否只显示有账号的工人
              :singleCheck = false 是否点击员工和工人时 直接关闭弹窗
              :disabled = false 是否能操作
              :isTip = true 是否显示提示
              :isText = false 是否使用文本不使用框框
              textCompanyArr = '选择全公司' 移动到公司上，右边显示提示语
              textDepartArr = '选择部门' 移动到部门上，右边显示提示语
              tip = "参与人" 提示语
            ></zz-retrieve>
          `,
        explameHandle: `
          在 script 顶部 导入 import { mapGetters } from 'vuex'
          在export default 加入以下方法
          computed: {
            ...mapGetters({
              retrieveMids: 'getRetrieveMids'
            })
          }
          获取的时候  this.retrieveMids['组件上rId']
        `
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 10%;
    }
    .example-right{
      float: right;
      width: 78%;
      background: #fff;
    }
  }
</style>
